<div id="manage_group_page">
    <div id="manage_group_wrapper">
<form onsubmit="return submit();" action="" method="post">
    <div id="all_available_area">
        <p id="p_all_available">All available users</p>
        
        <p class='p_filter_users'>Display in List:
            
        <?php
            if($checked_all_users == TRUE)
                echo "<input type='checkbox' name='chk_all_users' id='chk_all_users' onclick='checkOthers()' checked />All Users </p>";
            else if($checked_all_users == FALSE) 
                echo "<input type='checkbox' name='chk_all_users' id='chk_all_users' onclick='checkOthers()' />All Users </p>";
            
            if($checked_admins == TRUE)
                echo "<div class='checkbox_container'><input type='checkbox' name='chk_site_admins' id='chk_site_admins' class='filter_box' onclick='uncheckAll()' checked />Site Admins</div>";
            else if($checked_admins == FALSE) 
                echo "<div class='checkbox_container'><input type='checkbox' name='chk_site_admins' id='chk_site_admins' class='filter_box' onclick='uncheckAll()' />Site Admins</div>";
            
            if($checked_employees == TRUE)
                echo "<div class='checkbox_container'><input type='checkbox' name='chk_employees' id='chk_employees' class='filter_box' onclick='uncheckAll()' checked />SCIS Employees</div>";
            else if($checked_employees == FALSE) 
                echo "<div class='checkbox_container'><input type='checkbox' name='chk_employees' id='chk_employees' class='filter_box' onclick='uncheckAll()' />SCIS Employees</div>";
            
            if($checked_students == TRUE)
                echo "<div class='checkbox_container'><input type='checkbox' name='chk_students' id='chk_students' class='filter_box' onclick='uncheckAll()' checked />SCIS Students</div>";
            else if($checked_students == FALSE) 
                echo "<div class='checkbox_container'><input type='checkbox' name='chk_students' id='chk_students' class='filter_box' onclick='uncheckAll()' />SCIS Students</div>";
            
        ?>
        
        <input type='submit' onclick="select_all('subscribers', true)" class='btn_filter' name='btn_filter_available' id='btn_filter_available' value='Filter' />
        
        <?php 
            echo "<select onchange='highlight_options(this)' name='all_available_select' id='all_available_select' multiple size='10'>";
            if($all_available == null || count($all_available) == 0) {
                echo "<p id='p_no_available'>There are currently no users you can subscribe to this group.</p>";
            }
            else {
                foreach($all_available as $aa) {
                    $id = $aa['user_id'];
                    $fname = $aa['fname'];
                    $lname = $aa['lname'];
                    $name = $fname.' '.$lname;
                    echo "<option class='option_class' value=$id>$name</option>";
                }
                
            }
            echo "</select>";
        ?>
        <div id="add_remove_area">
            <p onClick="move('all_available_select', 'subscribers')" id="btn_add_sub">Add >>></p>
            <p onClick="move('subscribers', 'all_available_select')" id="btn_remove_sub"><<< Remove</p>
        </div>
    </div>
        
        



<div id="separated">
    <div id="subscribers_area">
            <p id="p_sub_area">All subscribers of this group:</p>
            
            <?php 
            echo "<select name='subscribers[]' id='subscribers' multiple size='15'>";
            if($subscribers == null || count($subscribers) == 0) {
                echo "<p id='p_no_available'>There are no subscribers.</p>";
                echo "</select>";
            }
            else {
                foreach ($subscribers as $s) {
                    $id = $s['user_id'];
                    $name = $s['fname'].' '.$s['lname'];
                    echo "<option value=$id class='subscribers'>$name</option>";
                }

                echo "</select>";
            }
            ?>
            
            <input type="submit" onclick="select_all('subscribers', true)" id="btnSaveSubs" name="btnSaveSubs" value="Save Subscriptions" />
<?php echo '</form>'; ?>
    <input type="button" id="btn_manage_cancel" value="Cancel" onclick="window.location='<?php echo base_url() ?>groups';" />
    </div>
</div>
</div>
</div>


<script>
    function move(sourceID, destID) {
        var src = document.getElementById(sourceID);
        var dest = document.getElementById(destID);

        for(var count=0; count < src.options.length; count++) {
            if(src.options[count].selected === true) {
                    var option = src.options[count];

                    var newOption = document.createElement("option");
                    newOption.value = option.value;
                    newOption.text = option.text;
                    newOption.selected = true;
                    try {
                             dest.add(newOption, null);
                             src.remove(count, null);
                     }catch(error) {
                             dest.add(newOption);
                             src.remove(count);
                     }
                    count--;
            }
        }
    }
    
    
    function select_all(source_list, is_selected) {
        var listbox = document.getElementById(source_list);
        for(var count=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = is_selected;
        }
    }
    
    
    function submit() {
        select_all('subscribers', true);
        return true;
    }
    
    
    function checkOthers() {
        var adminChkBox = document.getElementById('chk_site_admins');
        var empChkBox = document.getElementById('chk_employees');
        var studeChkBox = document.getElementById('chk_students');
        var allChkBox = document.getElementById('chk_all_users');
        
        if(allChkBox.checked === true) {
            adminChkBox.checked = true;
            empChkBox.checked = true;
            studeChkBox.checked = true;
        }
        else {
            adminChkBox.checked = false;
            empChkBox.checked = false;
            studeChkBox.checked = false;
        }
    }
    
    function uncheckAll() {
        var adminChkBox = document.getElementById('chk_site_admins');
        var empChkBox = document.getElementById('chk_employees');
        var studeChkBox = document.getElementById('chk_students');
        var allChkBox = document.getElementById('chk_all_users');
        
        if(allChkBox.checked === true) {
            if(adminChkBox.checked === false || empChkBox.checked === false || studeChkBox.checked === false) {
                allChkBox.checked = false;
            }
        }
        else if(allChkBox.checked === false) {
            if(adminChkBox.checked === true && empChkBox.checked === true && studeChkBox.checked === true) {
                allChkBox.checked = true;
            }
        }
    }
    
</script>

<script>
 var tiles1 = document.getElementsByClassName('subscribers');
    for(var i = 0; i < tiles1.length; i++) {
        var tile = tiles1[i];
        var color = get_random_color();
        tile.style.background = get_random_color();
    }
 
    function get_random_color() {
        var letters = 'dcf'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.round(Math.random() * 2)];
        }
        return color;
    }   
    
 </script>

<!--
<script>
    var toSelect = document.getElementById('all_students')
    , selected = document.getElementById('subscribers')
    , option;

    toSelect.onchange = function() { 
        option = document.createElement('option');
        option.value = this.value;
        option.text = this.options[this.selectedIndex].text;
        selected.appendChild(option);
        toSelect.removeChild(this.options[this.selectedIndex]);  
  };
    
</script>
    -->